<template>
  <div class="zzjgwh_component baseContainer">
    <div class="baseBoderShadow bgWhite baseBorderRadius">
      <div class="content_box">
        <!-- 左侧树形机构 -->
        <div class="left_wrap">
          <div class="wrap_box">
            <div class="a_zzjg_wrap">
              <a
                href="javascript:void(0)"
                class="a_zzjg_item"
                :class="{
                  'active': activeFlag === 0
                }"
                @click="zzjgChange(0)"
              >教学组织机构</a>
              <a
                href="javascript:void(0)"
                class="a_zzjg_item"
                :class="{
                'active': activeFlag === 1
              }"
                @click="zzjgChange(1)"
              >行政组织机构</a>
            </div>
            <!-- 树形结构数据 -->
            <div class="left_tree_wrap">
              <el-scrollbar
                wrap-class="scrollbar-wrapper"
                :wrapStyle="[{'height': '100%'}]"
                v-if="ifShowTree"
              >
                <el-tree
                  :props="props"
                  :load="loadNode"
                  lazy
                  @node-click="nodeClick"
                >
                </el-tree>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <!-- 右侧表格结构 -->
        <div class="right_wrap">
          <div class="wrap_box">
            <div class="handle_wrap">
              <el-button
                type="primary"
                @click="addFunc"
              >新 增</el-button>
              <el-button @click="delFunc(1)">删 除</el-button>
            </div>
            <div class="table_wrap">
              <div class="table_box">
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    width="55"
                  >
                  </el-table-column>
                  <el-table-column
                    label="序号"
                    width="60"
                    align="center"
                  >
                    <template slot-scope="scope">{{ 1 + scope.$index }}</template>
                  </el-table-column>
                  <el-table-column label="机构代码">
                    <template slot-scope="scope">
                      <div
                        class="one_line"
                        :title="scope.row.DM"
                      >{{scope.row.DM}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="名称">
                    <template slot-scope="scope">
                      <div
                        class="one_line"
                        :title="scope.row.MC"
                      >{{scope.row.MC}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="层次类型" v-if="activeFlag === 0">
                    <template slot-scope="scope">
                      <div
                        class="one_line"
                        :title="cclxObj[scope.row.CCLX]"
                      >{{cclxObj[scope.row.CCLX]}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否可用">
                    <template slot-scope="scope">
                      <div class="special_switch_wrap">
                        <el-switch
                          v-model="scope.row.SFKY"
                          inactive-text="否"
                          active-text="是"
                          :active-value="1"
                          :inactive-value="0"
                          @change="changeFunc(scope.row, ...arguments)"
                        >
                        </el-switch>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="150"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div class="el-table-btn-wrap">
                        <el-button
                          type="warning"
                          size="mini"
                          round
                          @click="editFunc(scope.row)"
                        >编辑</el-button>
                        <el-button
                          size="mini"
                          round
                          @click="delFunc(scope.row)"
                        >删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="编辑/新增机构"
      width="460px"
    >
      <div>
        <el-form
          label-width="120px"
          class="demo-ruleForm"
          v-if="activeFlag === 0"
        >
          <el-form-item
            label="类型"
            prop="jxzzjg_type"
          >
            <el-select
              v-model="jxzzjg_type"
              placeholder="请选择"
              @change="jxzzjg_type_change"
            >
              <el-option
                v-for="(vo, i) in jxzzjg_type_options"
                :key="i"
                :value="vo.value"
                :label="vo.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 院系教学组织机构 -->
        <div v-if="formShowFlag">
          <el-form
            :model="form_data"
            :rules="rules_all"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <template v-for="(item, index) in form_data_list">
              <el-form-item
                :key="`${jxzzjg_type}_${index}`"
                :label="item.label"
                :prop="item.name"
                v-if="!(item.name === 'cclx' && activeFlag === 1)"
              >
                <template v-if="item.type === 'text'">
                  <el-input
                    placeholder="请输入内容"
                    v-model.trim="form_data[item.name]"
                    :disabled="item.disabled"
                  ></el-input>
                </template>
                <template v-if="item.type === 'date'">
                  <el-date-picker
                    v-model="form_data[item.name]"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :editable="false"
                    clearable
                  ></el-date-picker>
                </template>
                <template v-else-if="item.type === 'select'">
                  <template v-if="item.remote">
                    <el-select
                      v-model="form_data[item.name]"
                      filterable
                      remote
                      clearable
                      reserve-keyword
                      placeholder="输入姓名或工号查询..."
                      :remote-method="remoteMethod"
                    >
                      <el-option
                        v-for="(vo, i) in jzgList"
                        :key="i"
                        :value="vo.id"
                        :label="vo.label"
                      ></el-option>
                    </el-select>
                  </template>
                  <template v-else-if="item.dictCode">
                    <Select
                      :key="item.dictCode"
                      v-model="form_data[item.name]"
                      :dictCode="item.dictCode"
                    ></Select>
                  </template>
                  <template v-else>
                    <el-select
                      v-model="form_data[item.name]"
                      placeholder="请选择"
                      :disabled="item.disabled === true"
                    >
                      <el-option
                        v-for="(vo, i) in $data[item['optionName']]"
                        :key="i"
                        :value="vo[item.valueCode || 'ID']"
                        :label="vo.MC"
                      ></el-option>
                    </el-select>
                  </template>
                </template>
                <template v-if="item.type === 'cascader'">
                  <Cascader
                    v-model="form_data[item.name]"
                    :asyncUrl="item.asyncUrl"
                    :ajaxData="item.ajaxData"
                    :method="item.method"
                  ></Cascader>
                </template>
              </el-form-item>
            </template>
          </el-form>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDictByBzdm_jxcclx, getDictByBzdm_ssxq } from "@/utils/common.js";
import Cascader from "../jzgxxwh/cascader.vue";
import Select from "../jzgxxwh/select.vue";
export default {
  name: 'zzjgwh',
  components: {
    Cascader,
    Select
  },
  data() {
    return {
      editId: "", // 编辑的id
      activeFlag: 0, // 教学组织机构  jxzzjg
      props: {
        label: "MC",
        children: "children"
        // isLeaf: "leaf"
      },
      tableData: [], // 表格数据
      multipleSelection: [], //
      ifShowTree: true,
      dialogVisible: false,
      formData: {
        dm: "",
        mc: "",
        fjdId: "",
        cclx: "",
        xqId: "",
        ywmc: "",
        fzrId: "",
        lxfs: "",
        yxjs: ""
      },
      rules: {
        dm: [
          { required: true, message: "机构代码不能为空", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        mc: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        ywmc: [
          { min: 0, max: 200, message: "长度在 0 到 200 个字符", trigger: "blur" }
        ],
        lxfs: [
          { min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        yxjs: [
          { min: 0, max: 300, message: "长度在 0 到 300 个字符", trigger: "blur" }
        ]
        // fjdId: [
        //   { required: true, message: "上级机构不能为空", trigger: "change" }
        // ]
      },
      // formDataList之所以不用object的形式，是考虑到for in遍历是无序的问题
      formDataList: [
        { type: "text", name: "dm", label: "机构代码" },
        { type: "text", name: "mc", label: "机构名称" },
        // { type: "text", name: "bjjc", label: "机构简称" },
        // {
        //   type: "cascader",
        //   name: "fjdId",
        //   label: "上级机构",
        //   asyncUrl: "/web/zzjg/queryZzjgByType",
        //   method: "post",
        //   ajaxData: { type: 0 }
        // },
        {
          type: "select",
          label: "上级机构",
          name: "fjdId",
          disabled: true,
          optionName: "fjdOption"
        },
        {
          type: "select",
          name: "cclx",
          label: "层次类型",
          optionName: "cclxList",
          valueCode: "DM"
        },
        {
          type: "select",
          name: "xqId",
          label: "所属校区",
          optionName: "ssxqList"
        },
        { type: "text", name: "ywmc", label: "英文名称" },
        { type: "select", name: "fzrId", label: "负责人", remote: true },
        { type: "text", name: "lxfs", label: "联系方式" },
        { type: "text", name: "yxjs", label: "机构简介" }
      ],
      formData_zy: {
        dm: "",
        mc: "",
        jc: "",
        fjdId: "",
        zyfxId: "",
        zyklId: "",
        xzId: "",
        xqId: "",
        jlny: "",
        ywmc: ""
      },
      rules_zy: {
        dm: [
          { required: true, message: "专业代码不能为空", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        mc: [
          { required: true, message: "专业名称不能为空", trigger: "blur" },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        ywmc: [
          { min: 0, max: 200, message: "长度在 0 到 200 个字符", trigger: "blur" }
        ],
        jc: [
          { min: 0, max: 300, message: "长度在 0 到 300 个字符", trigger: "blur" }
        ]
        // fjdId: [
        //   { required: true, message: "上级机构不能为空", trigger: "change" }
        // ]
      },
      formDataList_zy: [
        { type: "text", name: "dm", label: "专业代码" },
        { type: "text", name: "mc", label: "专业名称" },
        { type: "text", name: "jc", label: "机构简称" },
        // {
        //   type: "cascader",
        //   name: "fjdId",
        //   label: "上级机构",
        //   asyncUrl: "/web/zzjg/queryZzjgByType",
        //   method: "post",
        //   ajaxData: { type: 0 }
        // },
        {
          type: "select",
          label: "上级机构",
          name: "fjdId",
          disabled: true,
          optionName: "fjdOption"
        },
        {
          type: "select",
          name: "zyfxId",
          label: "专业方向",
          // optionName: "cclxList"
          dictCode: "XXDM-ZYFX"
        },
        {
          type: "select",
          name: "zyklId",
          label: "专业科类",
          // optionName: "cclxList"
          dictCode: "DM-ZYKL"
        },
        {
          type: "select",
          name: "xzId",
          label: "学制",
          // optionName: "cclxList"
          dictCode: "XXDM-XZ"
        },
        {
          type: "select",
          name: "xqId",
          label: "所属校区",
          optionName: "ssxqList"
        },
        { type: "date", name: "jlny", label: "创建日期" },
        { type: "text", name: "ywmc", label: "英文名称" }
      ],
      cclxObj: {}, // 层次类型对象
      cclxList: [], // 层次类型列表
      ssxqList: [], // 所属校区
      jxzzjg_type_options: [
        { label: "院系", value: "YX" },
        { label: "专业", value: "ZY" }
      ],
      jxzzjg_type: "YX",
      jzgList: [],
      currentNode: null, // 当前选中的节点
      fjdOption: [],
      formShowFlag: true // 表格展示
      // form_data: null,
    };
  },
  computed: {
    form_data() {
      return this.jxzzjg_type === "YX" ? this.formData : this.formData_zy;
    },
    form_data_list() {
      return this.jxzzjg_type === "YX"
        ? this.formDataList
        : this.formDataList_zy;
    },
    rules_all() {
      return this.jxzzjg_type === "YX" ? this.rules : this.rules_zy;
    },
    sjjgValue() {
      const node = this.currentNode;
      return node ? node.MC : " ";
    }
  },
  watch: {
    currentNode: {
      handler: function(val) {
        const node = val;
        let obj = null;
        if (node) {
          obj = {
            ID: node.ID,
            MC: node.MC
          };
        }
        this.fjdOption = obj ? [obj] : [];
      },
      deep: true
    }
  },
  created() {
    // this.form_data = { ...this.formData };
  },
  mounted() {
    // 获取层次类型
    this.getDictByBzdm_jxcclx();
    // 获取所属校区
    this.getDictByBzdm_ssxq();
  },
  methods: {
    /**
     * @name initTree
     * @description 初始化
     * @author cjs1992
     * @date 2019-11-22 10:48:23
     */
    initTree() {
      this.currentNode = null;
      this.ifShowTree = false;
      this.$nextTick(() => {
        this.ifShowTree = true;
      });
    },
    /**
     * @name remoteMethod
     * @description 查询负责人
     * @author cjs1992
     * @date 2019-11-22 09:58:20
     */
    async remoteMethod(val) {
      const query = val.trim();
      if (query === "") {
        this.jzgList = [];
        return;
      }
      const res = await this.$store.dispatch("base-common/findJzgxxList", {
        search: query
      });
      try {
        this.jzgList = res.data.map(item => {
          return {
            ...item,
            label: `${item.xm}[${item.zgh}/${item.yxMc}]`
          };
        });
      } catch (error) {}
    },
    /**
     * @name getDictByBzdm_jxcclx
     * @description 获取层次类型
     * @author cjs1992
     * @date 2019-11-14 10:53:30
     */
    async getDictByBzdm_jxcclx() {
      let res = await getDictByBzdm_jxcclx();
      let obj = {};
      res.map(item => {
        obj[item.DM] = item.MC;
      });
      this.cclxObj = obj;
      // 过滤掉专业层次类型
      res = res.filter(item => item.DM !== "ZY");
      this.cclxList = res;
    },
    /**
     * @name getDictByBzdm_ssxq
     * @description 获取所属校区
     * @author cjs1992
     * @date 2019-11-14 11:48:56
     */
    async getDictByBzdm_ssxq() {
      const res = await getDictByBzdm_ssxq();
      this.ssxqList = res;
    },
    /**
     * @name changeFunc
     * @description 切换状态
     * @author cjs1992
     * @date 2019-11-14 11:06:52
     */
    async changeFunc(data, flag) {
      let url = 'editZzJgById';
      if (data.CCLX === 'ZY') {
        url = 'editZyZzJgById';
      }
      const res = await this.$store.dispatch(`jcsz-zzjgwh/${url}`, {
        id: data.ID,
        sfky: flag
      });
      this.$message({
        type: 'success',
        message: '编辑成功!'
      });
      // this.initTree();
      if (this.currentNode) {
        this.nodeClick(this.currentNode);
      } else {
        this.initTree();
      }
    },
    /**
     * @name editFunc
     * @description 编辑
     * @author cjs1992
     * @date 2019-11-14 11:07:05
     */
    async editFunc(data) {
      this.resetFormData();
      this.editId = data.ID;
      // 获取数据
      const res = await this.getZzJgById();
      let obj = {
        dm: "DM",
        mc: "MC",
        fjdId: "FJD_ID",
        cclx: "CCLX",
        xqId: "xqId",
        ywmc: "ywmc",
        fzrId: "fzrId",
        lxfs: "lxfs",
        yxjs: "yxjs"
      };
      let formStr = "formData";
      if (res.CCLX === "ZY") {
        this.jxzzjg_type = "ZY";
        formStr = "formData_zy";
        obj = {
          dm: "DM",
          mc: "MC",
          jc: "JC",
          fjdId: "FJD_ID",
          zyfxId: "ZYFX_ID",
          zyklId: "ZYKL_ID",
          xzId: "XZ_ID",
          cclx: "CCLX",
          xqId: "xqId",
          jlny: "JLNY",
          ywmc: "ywmc"
        };
      } else {
        this.jxzzjg_type = "YX";
        this.remoteMethod(String(res[obj["fjdId"]]));
      }
      for (let key in obj) {
        this.$set(this[formStr], key, res[obj[key]]);
      }
      this.dialogVisible = true;
    },
    /**
     * @name getZzJgById
     * @description 获取组织机构信息
     * @author cjs1992
     * @date 2019-11-22 11:20:43
     */
    async getZzJgById() {
      const res = await this.$store.dispatch("jcsz-zzjgwh/getZzJgById", {
        Id: this.editId
      });
      return Promise.resolve(res.data || {});
    },
    /**
     * @name delFunc
     * @description 删除
     * @author cjs1992
     * @date 2019-11-14 11:07:23
     */
    async delFunc(data) {
      if (data === 1) {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的数据!'
          });
          return;
        }
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let ids;
          if (data === 1) {
            // 批量删除
            ids = this.multipleSelection.map(item => item.ID);
          } else {
            ids = [data.ID];
          }
          await this.$store.dispatch("jcsz-zzjgwh/delZzJgByIds", ids);
          this.$message({
            type: "success",
            message: "删除成功"
          });
          // 初始化
          this.initTree();
        })
        .catch(() => {});
    },
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.sureFunc();
          // console.log(
          //   this.formData
          // )
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * @name resetForm
     * @description 初始化表格查询
     * @author cjs1992
     * @date 2019-11-22 11:15:46
     */
    resetForm() {
      this.resetFormData();
      this.$refs["ruleForm"].resetFields();
    },
    /**
     * @name jxzzjg_type_change
     * @description 切换组织机构类别
     * @author cjs1992
     * @date 2019-11-22 13:28:05
     */
    jxzzjg_type_change(val) {
      this.formShowFlag = false;
      this.$nextTick(() => {
        this.formShowFlag = true;
        this.$nextTick(() => {
          this.$refs["ruleForm"].resetFields();
        });
        // console.log(
        //   JSON.stringify(
        //     this.form_data_list
        //   )
        // )
        // this.$refs["ruleForm"].resetFields();
      });
    },
    /**
     * @name resetFormData
     * @description 初始化表格数据
     * @author cjs1992
     * @date 2019-11-22 11:16:18
     */
    async resetFormData() {
      this.jxzzjg_type = "YX";
      const node = this.currentNode;
      const fjdId = node ? node.ID : "";
      this.formData = {
        dm: "",
        mc: "",
        fjdId: fjdId,
        cclx: "",
        xqId: "",
        ywmc: "",
        fzrId: "",
        lxfs: "",
        yxjs: ""
      };
      this.formData_zy = {
        dm: "",
        mc: "",
        jc: "",
        fjdId: fjdId,
        zyfxId: "",
        zyklId: "",
        xzId: "",
        xqId: "",
        jlny: "",
        ywmc: ""
      };
      // console.log(this.currentNode, fjdId, this.formData);
    },
    /**
     * @name sureFunc
     * @description 保存方法
     * @author cjs1992
     * @date 2019-11-22 10:16:45
     */
    async sureFunc() {
      let url = "addJxZzJg",
        data = { ...this.form_data },
        obj = {},
        msg = "新增";
      if (this.editId) {
        // 编辑
        url = "editZzJgById";
        msg = "编辑";
        Object.assign(obj, {
          id: this.editId
        });
      }
      if (this.activeFlag === 0) {
        // 教学组织机构，区分院系和专业
        if (this.jxzzjg_type === "ZY") {
          // data = { ...this.formData_zy };
          url = "addZyJxZzJg";
          if (this.editId) {
            // 编辑
            url = "editZyZzJgById";
          }
        }
      } else {
        // 行政组织机构
        url = "addXzZzJg";
      }
      // 进行操作
      const res = await this.$store.dispatch(`jcsz-zzjgwh/${url}`, {
        ...data,
        ...obj
      });
      this.$message({
        type: "success",
        message: `${msg}成功!`
      });
      this.dialogVisible = false;
      // 重新初始化
      this.initTree();
    },
    /**
     * @name addFunc
     * @description 添加
     * @author cjs1992
     * @date 2019-11-13 16:18:17
     */
    addFunc() {
      this.editId = "";
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    /**
     * @name zzjgChange
     * @description 切换组织机构
     * @author cjs1992
     * @date 2019-11-13 14:43:05
     */
    async zzjgChange(str) {
      this.activeFlag = str;
      this.initTree();
    },
    /**
     * @name nodeClick
     * @description 树节点点击事件
     * @author cjs1992
     * @date 2019-11-14 11:57:34
     */
    async nodeClick(data, node) {
      this.currentNode = data;
      // if (data.childTotal === 0) {
      //   // 没有子节点
      //   return (this.tableData = []);
      // }
      const list = await this.getZzjgByFjdId(data.ID || 0);
      this.tableData = list;
    },
    async loadNode(node, resolve) {
      // if (node.childTotal === 0) {
      //   // 没有子节点
      //   return resolve([]);
      // }
      const list = await this.getZzjgByFjdId(node.data ? node.data.ID : 0);
      resolve(list);
      // if (node.level === 0) {
      //   return resolve([{ name: "region" }]);
      // }
      // if (node.level > 1) return resolve([]);
      // setTimeout(() => {
      //   const data = [
      //     {
      //       name: "leaf",
      //       leaf: true
      //     },
      //     {
      //       name: "zone"
      //     }
      //   ];
      //   resolve(data);
      // }, 500);
    },
    /**
     * @name getZzjgByFjdId
     * @description 根据组织机构id获取子机构
     * @author cjs1992
     * @date 2019-11-13 14:51:47
     */
    async getZzjgByFjdId(fjdId = 0) {
      let url = this.activeFlag === 1 ? "getXzzzjgByFjdId" : "getJxzzjgByFjdId";
      const res = await this.$store.dispatch(`jcsz-zzjgwh/${url}`, {
        fjdId
      });
      const list = res.data || [];
      this.tableData = list;
      return Promise.resolve(list);
    },
    /**
     * @name handleSelectionChange
     * @description 选中数据切换
     * @author cjs1992
     * @date 2019-11-13 15:39:09
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../common-switch.scss";
.content_box {
  padding: 10px;
  display: table;
  width: 100%;
  table-layout: fixed;
  & > .left_wrap,
  & > .right_wrap {
    display: table-cell;
    // 104是顶部距离，40是外部容器padding，20是内层padding
    height: calc(100vh - 104px - 40px - 20px);
    vertical-align: top;
    .wrap_box {
      border: 1px solid #e0e0e0;
      height: 100%;
    }
  }
  .left_wrap {
    padding-right: 5px;
    width: 320px;
    .left_tree_wrap {
      // TODO 这里不能使用100% - 50px 原因未知
      // height: calc(100% - 50px);
      height: calc(100vh - 104px - 40px - 20px - 50px);
      padding: 20px;
      box-sizing: border-box;
      /deep/ .el-tree-node.is-current {
        & > .el-tree-node__content {
          background: #3ac19d !important;
          color: #fff !important;
        }
        &:focus > .el-tree-node__content {
          background: #3ac19d;
        }
      }
    }
  }
  .right_wrap {
    padding-left: 5px;
    .wrap_box {
      display: block;
      position: relative;
      .table_box,
      .table_wrap {
        width: 100%;
      }
    }
  }
}
.zzjgwh_component {
  .a_zzjg_wrap {
    font-size: 0;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    .a_zzjg_item {
      height: 50px;
      width: 50%;
      vertical-align: top;
      display: inline-block;
      font-size: 14px;
      color: #999;
      text-align: center;
      line-height: 50px;
      &.active {
        background-color: #00d796;
        color: #fff;
      }
    }
  }
  /deep/ {
    .el-scrollbar {
      // height: 100%;
      // height: calc(100vh - 104px - 40px - 120px);
      height: 100%;
    }
    .scroBox .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }
  }
}
.demo-ruleForm {
  /deep/ .el-form-item__content {
    .el-select,
    .el-input,
    .el-cascader {
      width: 100%;
    }
  }
}
</style>
